<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{margin: 0;}
      header{height: 1000px; background-image: url(bj.jpg); background-size: cover;
        display: flex; align-items: center; justify-content: center;}
        button{position: relative;top: 100px; height: 50px;width: 300px;
            background-color: transparent;color:ffffff;font-size: 22px;
            border: 1px solid #ade6dc;outline: none;border-radius: 10px;cursor: pointer;}
    button:hover{background-color: #fff;color: #45b2eb;}
    div{height: 300px;display: flex;align-items: center;justify-content: center;}
    span{font-size: 66px;color: #e96d4f;}
    article{height:600px;background-image: url(1.jpg);background-attachment: fixed; }
    main{height: 600px;position:relative;}
main>img{position: absolute;bottom:0px;left:220px;}
main>aside{width:600px;position:absolute;top: 100px;right:200px;text-align:right;}
map{display:block;width: 100%;height: 600px;}
section{height: 600px;display:flex;align-items:center;justify-content: center;}
section>img{margin:0 50px;}
nav{height: 180px;width: 100%;background-color:rgba(18,183,245,0.5);}
video{width: 100%;}
li{line-height:80px;display:inline-block;padding: 0 30px;cursor:pointer;}
li:hover{background-color:#12b7f5;}
li>a{text-decoration:none;font-size:22;color: #fff;}
nav img{position:relative;top: 15px;margin: 0 50px; }
footer{height: 250px;background-color:#2a2a2a;}
figure{width: 1000px;margin: 0 auto;padding-top: 100px;color: #666;text-align:center;}
    </style>
</head>
<body>
<nav>
<a href=""><img src="20.png" alt=""></a>
<li><a href="">首页</a></li>
<li><a href="">下载</a></li>
<li><a href="">动态</a></li>
<header><button>welcome  to  here</button></header>
<div>
  <span>乐 在 沟 通</span>
</div>
<article></article>
<main>
    <img src="8.png" alt="">
    <aside>
      <h1>hello!everybody!</h1><hr>
      <p>沟通，是跨越千山万水的声音！</p>
      <p><a href="">了解更多</a></p>
    </aside>
</main>
<map id="here"></map>
<section>
<img src="11.png" alt="">
<img src="12.png" alt="">
<img src="13.png" alt="">
<audio src="胡歌-光棍-(电视剧《仙剑奇侠传三》插曲).mp3" autoloop controls></audio>
</section>
 <video src="大鱼海棠.mp4" controls></video>
<footer>
<hr>
<figure>
    <h6>Copyright  1998-2017 Tencent. All Rights Reserved.</h6>
    <h6>腾讯公司 版权所有</h6>
</figure>
</footer>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
    function initMap(){
        var map = new BMap.Map("here");
        var point = new BMap.Point(108.884922,34.161523);
        map.centerAndZoom(point, 19);
        window.map = map;
    }
    initMap();
</script>
</html>